<template>
  <div class="tab-content">
    <div class="w-[765px]">
      <el-form
        ref="ruleForm"
        :v-loading="loading"
        :model="form"
        :rules="rules"
        label-position="left"
        hide-required-asterisk
      >
        <!-- 所在区县 -->
        <el-form-item label="" prop="belongDistrict" class="row-left">
          <template #label>
            <div class="required">所在区县</div>
          </template>
          <el-cascader
            id="district"
            ref="district"
            v-model="form.belongDistrict"
            :disabled="disabled"
            class="w-full"
            clearable
            filterable
            placeholder="选择区县"
            :options="areaTree"
            :props="{
              checkStrictly: true,
              multiple: false,
              value: 'code',
              label: 'name',
            }"
          ></el-cascader>
        </el-form-item>
        <!-- 经济类型 -->
        <el-form-item label="required" prop="economicType" class="row-right">
          <template #label>
            <div class="required">经济类型</div>
          </template>
          <el-select v-model="form.economicType" :disabled="disabled" class="w-full">
            <el-option
              v-for="item in economicTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 管理单位 -->
        <el-form-item label="" prop="manageDepartment" class="row-left">
          <template #label>
            <div class="form-label">管理单位</div>
          </template>
          <el-input
            v-model="form.manageDepartment"
            :disabled="disabled"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <!-- 单位电话 -->
        <el-form-item label="" prop="manageDepartmentPhone" class="row-right">
          <template #label>
            <div class="form-label">单位电话</div>
          </template>
          <el-input
            v-model="form.manageDepartmentPhone"
            :disabled="disabled"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <!-- 官方网站 -->
        <el-form-item label="" prop="website" class="row-left">
          <template #label>
            <div class="form-label">官方网站</div>
          </template>
          <el-input v-model="form.website" :disabled="disabled" placeholder="请输入"></el-input>
        </el-form-item>
        <!-- 微信公众号 -->
        <el-form-item label="" prop="weChat" class="row-right">
          <template #label>
            <div class="form-label">微信公众号</div>
          </template>
          <el-input v-model="form.weChat" :disabled="disabled" placeholder="请输入"></el-input>
        </el-form-item>
        <!-- 微信公众号二维码 -->
        <el-form-item label="" prop="weChatQRcode" class="row-all">
          <template #label>
            <div>微信公众号二维码</div>
          </template>
          <CustomUpload :img-list.sync="form.weChatQRcode" />
        </el-form-item>
        <!-- 载体资源 -->
        <el-form-item label="" prop="carrier" class="row-left">
          <template #label>
            <div class="">载体资源</div>
          </template>
          <el-select v-model="form.carrier" multiple :disabled="disabled" class="w-full">
            <el-option
              v-for="item in carrierOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 园区简介 -->
        <el-form-item label="" prop="parkPlanning" class="row-all">
          <template #label>
            <div>园区简介</div>
          </template>
          <el-input
            v-model="form.parkPlanning"
            :disabled="disabled"
            type="textarea"
            :rows="3"
            maxlength="300"
            show-word-limit
            placeholder="300字以内文字描述"
          ></el-input>
        </el-form-item>
        <!-- 园区优势 -->
        <el-form-item label="" prop="parkAdvantage" class="row-all">
          <template #label>
            <div>园区优势</div>
          </template>
          <el-input
            v-model="form.parkAdvantage"
            :disabled="disabled"
            type="textarea"
            :rows="3"
            maxlength="300"
            show-word-limit
            placeholder="300字以内文字描述"
          ></el-input>
        </el-form-item>
        <!-- 交通条件 -->
        <el-form-item label="" prop="traffic" class="row-all">
          <template #label>
            <div>交通条件</div>
          </template>
          <el-input
            v-model="form.traffic"
            :disabled="disabled"
            type="textarea"
            :rows="3"
            maxlength="300"
            show-word-limit
            placeholder="300字以内文字描述"
          ></el-input>
        </el-form-item>
        <!-- 园区服务 -->
        <el-form-item label="" prop="parkServices" class="row-all">
          <template #label>
            <div>园区服务</div>
          </template>
          <el-input
            v-model="form.parkServices"
            :disabled="disabled"
            type="textarea"
            :rows="3"
            maxlength="300"
            show-word-limit
            placeholder="300字以内文字描述"
          ></el-input>
        </el-form-item>

        <!-- 园区荣誉 -->
        <el-form-item label="" prop="parkHonor" class="row-all">
          <template #label>
            <div>园区荣誉</div>
          </template>

          <div class="flex space-x-2 mb-2">
            <el-input
              v-model="form.parkHonor[0].year"
              :disabled="disabled"
              placeholder="请输入"
              class="w-2/12"
            >
              <div slot="suffix" class="pr-2 text-[#444450]">年</div>
            </el-input>
            <el-input
              v-model="form.parkHonor[0].honor"
              :disabled="disabled"
              class="w-5/12"
              placeholder="获得荣誉"
            />
            <el-button type="text" @click="handleAddHonor">+新增园区荣誉</el-button>
          </div>

          <div
            v-for="(item, index) in form.parkHonor.slice(1)"
            :key="index"
            class="flex space-x-2 mb-2"
          >
            <el-input v-model="item.year" placeholder="请输入" class="w-2/12">
              <div slot="suffix" class="pr-2 text-[#444450]">年</div>
            </el-input>
            <el-input v-model="item.honor" class="w-5/12" placeholder="获得荣誉" />
            <i
              class="el-icon-remove-outline text-xl cursor-pointer flex items-center"
              @click="handleDelHonor(index)"
            ></i>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <Save :disabled="loading" @onPreview="handlePreview" @onSave="handleSave" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Save from '../common/Save.vue'
import CustomUpload from '../../carrier/common/CustomUpload/index.vue'
import { economicTypeOptions, carrierOptions } from '../../carrier/common/dictionary'
import addEditMixin from '../common/addEditMixin'
const selectKey = [
  { key: 'economicType', options: 'economicTypeOptions' },
  { key: 'carrier', options: 'carrierOptions' },
]

const defaultForm = {
  belongDistrict: [],
  economicType: null,
  manageDepartment: null,
  manageDepartmentPhone: null,
  website: null,
  weChat: null,
  weChatQRcode: [],
  carrier: null,
  parkPlanning: null,
  parkAdvantage: null,
  traffic: null,
  parkServices: null,
  parkHonor: [{ year: '', honor: '' }],
}

const treeKey = [{ key: 'belongDistrict', refName: 'district' }]
export default Vue.extend({
  components: { Save, CustomUpload },
  mixins: [addEditMixin({ defaultForm, selectKey, treeKey, templateName: 'B_CONSOLE_PARK' })],
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form: { ...defaultForm },
      rules: {
        belongDistrict: [{ required: true, message: '请选择所在区域', trigger: 'change' }],
        economicType: [{ required: true, message: '请选择经济类型', trigger: 'change' }],
      },
      economicTypeOptions,
      carrierOptions,
    }
  },
  head: {
    title: '园区信息',
  },
})
</script>
<style lang="scss" scoped>
@import '@/assets/scss/form.scss';
</style>
